import { ArrowLeftOutlined } from '@ant-design/icons';
import { Divider, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';

import { getTopicDetail } from '@/api/myResearch';
import { useRequest } from '@ac/hooks';
import MaterialLists from './Components/MaterialLists';
import ResultLists from './Components/ResultLists';

const TopicDetail: React.FC = () => {
	const navigate = useNavigate();
	const [searchParams] = useSearchParams();
	const id = searchParams.get('id') || '';
	const [activeKey, setActiveKey] = useState('material');

	// 研究详情
	const { run: fetchTopicDetail, data } = useRequest(getTopicDetail);

	const topicInfo = useMemo(() => {
		return data?.result;
	}, [data]);

	useEffect(() => {
		fetchTopicDetail({ id });
	}, [id, fetchTopicDetail]);

	const TabOptions = useMemo(() => {
		return [
			{
				label: '研究素材',
				key: 'material'
			},
			{
				label: '研究成果',
				key: 'result'
			}
		];
	}, []);

	return (
		<div className="wh-full box-border flex flex-col">
			<div className="h-45 rounded-4 bg-#fff flex items-center px-15">
				<ArrowLeftOutlined
					onClick={() => navigate(-1)}
					className="text-18 cursor-pointer font-bold mt-[-2px]"
				/>
				<Divider className="mx-15 b-#cdcdcd h-15" type="vertical" />
				<div className="flex text-15">
					<span className="text-#666">研究选题：</span>
					<span className="text-#333 font-bold">{topicInfo?.name}</span>
				</div>
			</div>
			<div className="flex-1 flex flex-col h-0 w-full mt-10 bg-#fff rounded-4 px-15 box-border">
				<Tabs defaultActiveKey="material" onChange={setActiveKey} items={TabOptions}></Tabs>
				<div className="flex-1 h-0 w-full pb-20 box-border">
					{activeKey === 'material' && <MaterialLists id={id} />}
					{activeKey === 'result' && <ResultLists id={id} />}
				</div>
			</div>
		</div>
	);
};

export default TopicDetail;
